<template>
<div>
  <el-button type="button" @click="dialogFormVisible = true">新增表格</el-button>

  <el-dialog title="添加成员" :visible.sync="dialogFormVisible">
    <el-form :model="form">
      <el-form-item label="姓名" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="地址" :label-width="formLabelWidth">
        <el-input v-model="form.address" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="日期" :label-width="formLabelWidth">
        <el-input v-model="form.date" autocomplete="off"></el-input>
      </el-form-item>

    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="handleEdit">确 定</el-button>
    </div>
  </el-dialog>
  <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column
      label="日期"
      width="180">
      <template slot-scope="scope">
        <i class="el-icon-time"></i>
        <span style="margin-left: 10px">{{ scope.row.date }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="姓名"
      width="180">
      <template slot-scope="scope">
        <el-popover trigger="hover" placement="top">
          <p>姓名: {{ scope.row.name }}</p>
          <p>住址: {{ scope.row.address }}</p>
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.name }}</el-tag>
          </div>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

</div>
</template>

<script>
import {getInfo,deleteInfo,getUser} from'@/api/table'
export default {
data() {
return {
tableData: [],
        dialogFormVisible: false,
        form: {
          name: '',
          address:'',
          date: '',
        },
        formLabelWidth: '120px'
}
},
created(){
  getUser();
},
methods: {
handleEdit() {
  var row ={};
  row.name=this.form.name;
  row.date=this.form.date;
  row.address=this.form.address;
  this.tableData.push(row);
  getInfo(row);
  this.dialogFormVisible=false;

},
handleDelete(index, row) {
  deleteInfo(row);
  this.tableData.splice(index, 1);
}
},
}
</script>
